1 00:00:00,650 --> 00:00:01,200 Hello. 2 00:00:01,200 --> 00:00:11,230 In this lecture or we are going to create the structure for our app the countdown timer using his t 3 00:00:11,220 --> 00:00:13,510 email. 4 00:00:13,680 --> 00:00:17,090 This is our cma file just to save time. 5 00:00:17,100 --> 00:00:25,650 I've already pre written had the code so I'm just going to run through the code with you some of the 6 00:00:25,710 --> 00:00:26,240 tags. 7 00:00:26,250 --> 00:00:31,170 You may be familiar with already so I do apologize if fits. 8 00:00:31,230 --> 00:00:33,010 If I'm repeating myself. 9 00:00:35,130 --> 00:00:39,950 Line one is basically refers to the document type. 10 00:00:39,960 --> 00:00:48,780 So this this declaration so that the web browsers search engines all know that the documents that this 11 00:00:49,800 --> 00:00:54,020 page contains is a haish Timo 5 document. 12 00:00:54,270 --> 00:00:56,720 So how tall is TMF dog. 13 00:00:56,730 --> 00:01:08,430 Me and Biggie is from line to -- the way to line 33 so anything between line to a line is referred 14 00:01:08,430 --> 00:01:11,760 to as a team mail document. 15 00:01:11,760 --> 00:01:18,450 So also if you notice there's some indentation here so that you can differentiate between the parent 16 00:01:18,480 --> 00:01:19,750 and the child. 17 00:01:19,760 --> 00:01:27,680 They say Email Tag is a is the main parent element and you can see the head is a child on the hastier 18 00:01:27,690 --> 00:01:31,700 male and the body is a child of the amount. 19 00:01:31,910 --> 00:01:39,680 You can tell that the inside the head child elements of the head the tags inside the body. 20 00:01:39,690 --> 00:01:44,340 Child elements of the body tag. 21 00:01:44,340 --> 00:01:53,580 So let's start where they had the head content or behead tag basically is for information purposes. 22 00:01:53,640 --> 00:02:00,840 You don't really see them when the page is loaded at the web browsers and the search engines use use 23 00:02:00,840 --> 00:02:06,200 the information for the information contained in the head section. 24 00:02:06,370 --> 00:02:15,300 I use that for informational purposes hotcakes so online for here we've got email that tag had inside 25 00:02:15,300 --> 00:02:21,670 that tag there is an attribute called Cast set as a value of utf Dash 8. 26 00:02:21,870 --> 00:02:31,320 Basically this refers to the coding type as type of encoding or characters use for page line 5 is the 27 00:02:31,350 --> 00:02:35,160 title for the P line 7. 28 00:02:35,160 --> 00:02:41,280 Here's another metter tag metter by the way it means more information meta tags are used to provide 29 00:02:41,340 --> 00:02:42,870 extra information. 30 00:02:42,870 --> 00:02:51,870 So Line 7 refers to a meter tag with an attribute called Name and Value description. 31 00:02:52,200 --> 00:02:56,280 Basically again provide information to the search engines. 32 00:02:56,340 --> 00:03:07,140 He's got an odd variable on other attributes cause content with a value of Holyday countdown calculator. 33 00:03:08,130 --> 00:03:14,590 Again this is for information purposes say someone types in to Google and type in holiday countdown 34 00:03:14,660 --> 00:03:15,990 down couple feet up. 35 00:03:15,990 --> 00:03:22,800 Google will say this is where Google will go and look for the head section of any web browser or any 36 00:03:22,800 --> 00:03:27,240 Web page that has Dan's value and try and render them to display. 37 00:03:27,270 --> 00:03:32,260 So that's what does information are there for line 7. 38 00:03:32,280 --> 00:03:37,590 I got a lot of letter code name quotes you put it. 39 00:03:37,760 --> 00:03:47,250 It's got us an attribute of name inside that tag value is viewport and also not of another attribute 40 00:03:47,280 --> 00:03:55,840 called content with a value cause with equals device minus Kamar initial scale. 41 00:03:55,880 --> 00:04:04,220 What line surman is saying is that any device regardless of the screen size is was referring to the 42 00:04:04,230 --> 00:04:07,960 view screen size regardless of the screen size. 43 00:04:08,040 --> 00:04:09,630 Can you view this page. 44 00:04:09,890 --> 00:04:11,520 And also you can zoom in. 45 00:04:11,520 --> 00:04:18,950 You notice of course initial skill here that refers to resume in it and zooming out line it refers to 46 00:04:18,990 --> 00:04:21,140 this type of seat externals it. 47 00:04:21,150 --> 00:04:26,630 We were reference which is this car style sheet here lie. 48 00:04:26,660 --> 00:04:28,400 Yeah that's the end of the headset. 49 00:04:28,430 --> 00:04:29,690 It ends on line 9. 50 00:04:29,700 --> 00:04:36,420 So let's move over to d body as you can see the tags are always make sure your tags are close properly 51 00:04:36,420 --> 00:04:42,600 you can see the close tabs with the Fords last before detax so very important. 52 00:04:42,870 --> 00:04:45,320 Okay that's the let's go to the body. 53 00:04:45,720 --> 00:04:54,330 So this is a body body tag which starts on line 10 and ends on line 32. 54 00:04:54,460 --> 00:05:02,760 It's this content in the body tag is what you actually see when you visit a page so the constant visible 55 00:05:02,760 --> 00:05:04,770 content is between the body. 56 00:05:05,340 --> 00:05:07,400 Have gotten here one they aren't lying. 57 00:05:07,410 --> 00:05:13,650 11 THIS IS A title tag it will display a title Corps name to count down. 58 00:05:13,690 --> 00:05:17,500 I've defined a d d Ecclesia division in the P. 59 00:05:17,520 --> 00:05:21,060 Just divide the section of a page line 12. 60 00:05:21,080 --> 00:05:24,860 I have created a div giving it an idea off clock. 61 00:05:24,900 --> 00:05:32,620 Dave Hall use this idea later to reference it in our javascript aren't also in our success. 62 00:05:33,060 --> 00:05:44,400 Lying forward team have created its span element so lifespan this band basically used to you had things 63 00:05:44,400 --> 00:05:45,380 together. 64 00:05:45,630 --> 00:05:47,590 So this band element here. 65 00:05:48,100 --> 00:05:50,310 Class of. 66 00:05:50,630 --> 00:05:56,730 Defend it in the class and then hide the attribute is that a class can be reused several times while 67 00:05:56,730 --> 00:05:58,610 an idea is unique. 68 00:05:58,680 --> 00:06:00,280 So Im going to use this. 69 00:06:00,290 --> 00:06:05,750 I have used this class several times I've used it online for teen use. 70 00:06:05,750 --> 00:06:09,110 Did a game on. 71 00:06:09,340 --> 00:06:13,510 I have quit several classes for that. 72 00:06:13,710 --> 00:06:14,740 No that is abuse. 73 00:06:14,730 --> 00:06:18,700 This classes here the class create the class use on 15. 74 00:06:18,920 --> 00:06:28,240 I've also used it here on line 19 and all saw on line twenty three line 27. 75 00:06:28,350 --> 00:06:35,080 So the difference between a class and an I.D. class is really really reuseable several times within 76 00:06:35,080 --> 00:06:36,270 a page. 77 00:06:36,600 --> 00:06:42,400 So I've also created some other class here called hours days and so on. 78 00:06:42,400 --> 00:06:51,900 So this content bisley comprises of deaves and span a span element is used to join content together. 79 00:06:52,470 --> 00:07:03,590 So the span basically span tag is a way to group in line elements in a document and gather carlye Provides 80 00:07:03,600 --> 00:07:11,490 Hill hawk hooks a part of the text or other parts of the document to as card like the Sella to play 81 00:07:11,490 --> 00:07:17,210 glues them together so that fit for the hastier male structure. 82 00:07:17,520 --> 00:07:26,660 In our next election it will be implemented in are javascript and then will implement. 83 00:07:27,030 --> 00:07:28,370 Success. 84 00:07:28,440 --> 00:07:29,670 Thanks for watching. 85 00:07:29,670 --> 00:07:30,600 Bye for now. 86 00:07:33,950 --> 00:07:37,820 So this is what half page looks like and of my make haste to email. 87 00:07:37,820 --> 00:07:44,510 So this is why the hate mail as created was we've implemented this year says it will look much better 88 00:07:44,590 --> 00:07:49,680 and then the javits group will provide the outroar functionality for the clock.